import React, { useCallback, useState } from 'react';
import {
  Box,
  Stack,
  FormControl,
  InputGroup,
  InputLeftElement,
  Input,
  Icon,
  Button,
  Text,
  HStack,
  // useColorModeValue,
} from '@chakra-ui/react';
import { FiUser, FiLock, FiPhone } from 'react-icons/fi';
import { AiOutlineWechat, AiOutlineQq } from 'react-icons/ai';
import axios from '../../service';

export default function SignUp() {
  const [nikeName, setNikeName] = useState('nikename');
  const [phone, setphone] = useState('13888888888');
  const [password, setpassword] = useState('12345678');
  const onSubmitToEnd = useCallback(() => {
    console.log('onSubmitToEnd');
    axios
      .post('users', {
        user: {
          username: nikeName,
          email: phone,
          password: password,
        },
      })
      .then((res) => {
        console.log(res);
        alert('注册成功');
      })
      .catch((e) => {
        alert(e);
        console.error(e);
      });
  }, []);

  return (
    <Stack spacing="6">
      <Box
        bg="rgba(181, 181, 181, 0.1)"
        borderRadius="4px"
        border="1px solid #c8c8c8">
        <FormControl>
          <InputGroup>
            <InputLeftElement
              h="50px"
              pointerEvents="none"
              children={<Icon as={FiUser}></Icon>}
            />
            <Input
              h="50px"
              value={nikeName}
              onChange={(event) => setNikeName(event.target.value)}
              placeholder="你的昵称"
              maxLength={16}
              focusBorderColor="transparent"></Input>
          </InputGroup>
        </FormControl>
        <FormControl>
          <InputGroup>
            <InputLeftElement
              h="50px"
              pointerEvents="none"
              children={<Icon as={FiPhone}></Icon>}
            />
            <Input
              h="50px"
              value={phone}
              onChange={(e) => setphone(e.target.value)}
              placeholder="手机号"
              maxLength={11}
              focusBorderColor="transparent"></Input>
          </InputGroup>
        </FormControl>
        <FormControl>
          <InputGroup>
            <InputLeftElement
              h="50px"
              pointerEvents="none"
              children={<Icon as={FiLock}></Icon>}
            />
            <Input
              h="50px"
              value={password}
              onChange={(e) => setpassword(e.target.value)}
              placeholder="设置密码"
              maxLength={16}
              type="password"
              focusBorderColor="transparent"></Input>
          </InputGroup>
        </FormControl>
      </Box>
      <Button
        onClick={onSubmitToEnd}
        h="45px"
        bg="customize.register"
        borderRadius="full"
        color="White"
        _focus={{ boxShadow: 'none' }}
        _hover={{ bg: 'rgba(66, 192, 46,0.8)' }}>
        注册
      </Button>
      <Text
        my="10px"
        fontSize="12px"
        lineHeight="20px"
        color="#969696"
        textAlign="center">
        点击 “注册” 即表示您同意并愿意遵守简书
        <br />
        <Text
          target="_blank"
          href="https://www.jianshu.com/p/c44d171298ce"
          as="a"
          cursor="pointer"
          color="#3194d0">
          用户协议
        </Text>
        &nbsp;和&nbsp;
        <Text
          target="_blank"
          href="https://www.jianshu.com/p/2ov8x3"
          as="a"
          cursor="pointer"
          color="#3194d0">
          隐私政策
        </Text>{' '}
        。
      </Text>
      <Stack mt="40px">
        <HStack className="more-sign" justifyContent="center">
          <Text as="h6" fontSize="12px" color="#b5b5b5" mb="10px">
            社交帐号直接注册
          </Text>
        </HStack>
        <HStack justifyContent="center">
          <Icon
            cursor="pointer"
            fontSize="28px"
            color="#00bb29"
            as={AiOutlineWechat}></Icon>
          <Icon
            cursor="pointer"
            fontSize="28px"
            color="#498ad5"
            as={AiOutlineQq}></Icon>
        </HStack>
      </Stack>
    </Stack>
  );
}
